<template>
    <div>
        <van-tabs :active="active" @change="activeChange">
            <van-tab :title="item.name" v-for="(item,index) in categoryList" :key="index">
                <div v-if="item.info">
                    <div v-if="isLoad">
                        <van-tabs :active="active1" @change="active1Change">
                            <van-tab :title="item1.name" v-for="(item1,index1) in item.info" :key="index1">
                            <ul class="goodsList" v-if="list.length>0">
                                <li class="goods" v-for="(item2,index2) in list" :key="index2">
                                <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item2.goods_id">
                                    <div class="pic">
                                    <img :src="item2.image" alt="">
                                    </div>
                                    <div class="msg">
                                    <span class="goodsPrice">￥{{item2.sell_price}}</span>
                                    <span class="popular"><img src="/static/img/fire.png"><span>{{item2.popularity}}</span></span>
                                    </div>
                                </a>
                                </li>
                            </ul>
                            <div v-else>
                                <div v-if="isNone" class="listNone">
                                <img src="/static/img/empty.png" alt="">
                                <p>该分类暂无数据</p>
                                </div>
                            </div>
                            </van-tab>
                        </van-tabs>
                    </div>

                </div>
                <div v-else>
                    <div v-if="isLoad">
                        <ul class="goodsList" v-if="list.length>0">
                            <li class="goods" v-for="(item1,index1) in list" :key="index1">
                            <a :href="'/pages/detail/main?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item1.goods_id">
                            <div class="pic">
                                <img :src="item1.image" alt="">
                            </div>
                            <div class="msg">
                                <span class="goodsPrice">￥{{item1.sell_price}}</span>
                                <span class="popular"><img src="/static/img/fire.png"><span>{{item1.popularity}}</span></span>
                            </div>
                            </a>
                            </li>
                        </ul>
                        <div v-else>
                            <div class="listNone">
                            <img src="/static/img/empty.png" alt="">
                            <p>该分类暂无数据</p>
                            </div>
                        </div>
                    </div>

                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import request from '@/actions/request.js'
    import localStroage from '@/actions/localStorage.js'
    export default {
        components: {
        },
        data() {
            return {
                categoryList:[],
                scrollTop:0,
                active:0,
                active1:0,
                isLoad:false,
                page:1,
                allPage:1,
                list:[],
                data:{
                    all_page:1,
                }
            }
        },
      onShow(){
        this.categoryList = [];
        this.isLoad =false;
        this.active1 = 0;
        this.active = 0;
        this.list=[];
        this.page=1;
        this.allPage=1;
        console.log(111)
        request.categoryList('api/Shop/categoryList','post',{},{},true,this);
      },
        onPageScroll(event) {
            this.scrollTop=event.scrollTop
        },
        onReachBottom() {
            if(this.page<this.allPage){
                this.page++;
                let category_id;
                if(this.categoryList[0].info){
                    category_id=this.categoryList[0].info[0].id
                }else{
                    category_id=this.categoryList[0].id
                }
                console.log(this.list)
                request.getGoodsByCid('api/shop/getGoodsByCid','post',{category_id:category_id,page:this.page},{},true,this);
            }else{
            }
        },
        methods:{
            activeChange (e) {
                let index=e.mp.detail.index;
                this.active=index;
                this.active1=0;
                this.page=1;
                this.list=[];
                let category_id;
                this.isLoad=false;
                if(this.categoryList[index].info){
                    category_id=this.categoryList[index].info[0].id
                }else{
                    category_id=this.categoryList[index].id
                }
                request.getGoodsByCid('api/Shop/getGoodsByCid', 'post', {category_id:category_id,page:1}, {}, false,this)

            },
            active1Change (e) {
                let index=e.mp.detail.index;
                this.active1=index;
                this.page=1;
                this.list=[];
                let category_id;
                category_id=this.categoryList[this.active].info[index].id;
                this.isLoad=false;
                request.getGoodsByCid('api/Shop/getGoodsByCid', 'post', {category_id:category_id,page:1}, {}, false,this)
            },
        },
        mounted() {
            // request.categoryList('api/Shop/categoryList','post',{},{},true,this);
        },
    }
</script>

<style scoped lang="scss">
.main-wrap{
    min-height: 100vh;
}
.foundNot{
    text-align: center;
    padding-top: 90px;
    img{
        width: 120px;
        margin-bottom: 20px;
    }
}
    .noteType{
        display: flex;
        justify-content: space-between;
        padding: 0 4vw;
        margin: 10px 0;
        .noteTypes:first-child{
            color: #FF4C50;

        }
        ul{
            display: flex;
            justify-content: space-between;
            width: 60px;
            font-size:12px;
        }
        span{
            font-size: 12px;
        }
    }
    .goodsType{
        display: flex;
        justify-content: space-around;
        font-size:12px;
        width: 100%;
        flex-wrap: wrap;
        margin: 10px 0;
        height: 50px;
        position: absolute;
        top: 0;
        z-index: 2;
        .goodsTypes:first-child{
            color:#FF4C50;
        }
    }
    .van-tabs__content{
        margin-top: 10px !important;
    }
    .noteList{
        display:flex;
        justify-content: space-between;
        padding: 4vw 4vw;
        flex-wrap: wrap;
        background: #f5f5f5;
        .notes{
            width:44vw;
            border-radius: 8px;
            background:#ffffff;
            .pic{
                height: 44vw;
                width: 44vw;
                line-height: 44vw;
                overflow: hidden;
                img{
                    width: 100%;

                }
            }
            .headIcon{
                width:25px;
                height: 25px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 5px;
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 100%;

                }
            }
            .msg{
                padding:8px 12px;

            }
            .userName{
                vertical-align: middle;
                font-size:13px;
                color:#333333;
            }
            .title{
                width: 100%;
                height: 45px;
                font-size: 13px;
                color: #333333;
                line-height: 22px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                // padding: 0 12px;
            }
            .popular{
                float:right;
                img{
                    width:16px;
                  height: 16px;
                    vertical-align: middle;
                    margin-right: 5px;
                }
                span{
                    font-size: 12px;
                    vertical-align: middle;
                }
            }
        }
    }
    .goodsList{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 4vw 4vw;
        background: #f5f5f5;
        .goods{
            width:44vw;
            border-radius: 8px;
            background:#ffffff;
            margin-bottom: 15px;
            .pic{
                height: 44vw;
                width: 44vw;
                line-height: 44vw;
                img{
                    width: 100%;
                  height: 100%;
                }
            }
            .headIcon{
                width:25px;
                height: 25px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 5px;
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 100%;

                }
            }
            .msg{
                padding:8px 12px;

            }
            .goodsPrice{
                vertical-align: middle;
                font-size:14px;
                color:#FF4C50;
            }
            .title{
                width: 100%;
                height: 45px;
                font-size: 13px;
                color: #333333;
                line-height: 22px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                // padding: 0 12px;
            }
            .popular{
                float:right;
                img{
                    width:13px;
                  height: 13px;
                    vertical-align: middle;
                    margin-right: 2px;
                }
                span{
                    font-size: 12px;
                    vertical-align: middle;
                }
            }
        }
    }
    .userList{
        padding: 12px 4vw;
        background: #f5f5f5;
        li{
            border-radius: 8px;
            background:#ffffff;
            padding:12px 22px 12px 12px;
        }
        .headIcon{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            img{
                width: 100%;
            }

        }
        .userName{
            font-size: 14px;
        }
        .userId{
            color:#666666;
            font-size: 12px;
        }
        .contentBtn{
            height: 24px;
            width: 60px;
            text-align: center;
            line-height: 24px;
            background: #FF4C50;
            color: #ffffff;
            border-radius: 50px;
            vertical-align: middle;
        }
        .contentBtn1{
            height: 24px;
            width: 60px;
            text-align: center;
            line-height: 24px;
            background: #CCCCCC;
            color: #ffffff;
            border-radius: 50px;
            vertical-align: middle;
        }
        .note{
            line-height: 2em;
            color: #333333;
        }
    }

</style>
